<template>
  <el-container>
    <el-main>
      <!--
      prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
      -->
      <!-- direction="vertical"-->

      <el-col :span="12">
        <div class="table">
          <div class="sontable">
            <h1>报名信息</h1>
            <el-divider></el-divider>
            <el-form
              :model="form"
              :rules="rules"
              ref="login"
              label-width="80px"
            >
              <el-form-item label="姓名" prop="name">
                <el-input
                  type="text"
                  placeholder="请填写考生本人真实姓名，非常重要"
                  size="small"
                  prefix-icon="el-icon-postcard"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <div>
                  <el-radio v-model="form.sex" label="1" size="large"
                    >男</el-radio
                  >
                  <el-radio v-model="form.sex" label="2" size="large"
                    >女</el-radio
                  >
                </div>
              </el-form-item>
              <el-form-item label="身份证号" prop="sfzh">
                <el-input
                  type="password"
                  placeholder=">请填写考生本人身份证号，非常重要，末位为X的请大写"
                  size="small"
                  show-password
                  prefix-icon="el-icon-lock"
                  v-model="form.sfzh"
                ></el-input>
              </el-form-item>

              <el-form-item label="准考证号" prop="ticket">
                <el-input
                  type="text"
                  placeholder="可作为登录用户名，往届考生请重新注册"
                  size="small"
                  prefix-icon="el-icon-picture"
                  v-model="form.ticket"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="tele">
                <el-input
                  type="text"
                  placeholder="接收申请结果等相关信息，"
                  size="small"
                  prefix-icon="el-icon-picture"
                  v-model="form.tele"
                ></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input
                  type="text"
                  placeholder="密码找回和接收公告等，非常重要"
                  size="small"
                  prefix-icon="el-icon-picture"
                  v-model="form.email"
                ></el-input>
              </el-form-item>
              <el-form-item label="专业层次" prop="zycc">
                <el-select
                  v-model="form.zycc"
                  placeholder="Select"
                  size="small"
                  @change="Change"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="专业名称" prop="zymc">
                <el-select
                  v-model="form.zymc"
                  placeholder="Select"
                  size="small"
                >
                  <el-option
                    v-for="item in options_zymc"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="课程代码" prop="kcdm">
                <el-checkbox-group v-model="form.kcdm">
                  <el-checkbox
                    v-for="item in kcdm"
                    :label="item.name + '(' + item.code + ')'"
                    :key="item.code"
                  >
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="文件上传">
                <el-upload
                  ref="upload"
                  list-type="text"
                  :on-preview="handlePictureCardPreview"
                  :before-upload="beforeUpload"
                  :on-remove="handleRemove"
                  :auto-upload="false"
                  :multiple="true"
                  :limit="3"
                  show-file-list="true"
                  :on-exceed="handleExceed"
                >
                  <el-button type="primary">点击上传</el-button>
                  <!--<el-button type="primary">上传个人照片</el-button>-->
                  <template #tip>
                    <div class="el-upload__tip">
                      JPG/PNG/PDF文件大小不得超过500KB。
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;<el-button
                type="danger"
                @click="Submit"
                disabled="step==2"
                >开始报名</el-button
              >
              &nbsp;&nbsp;&nbsp;<el-button type="primary">返回首页</el-button>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="margin-left: 10px; margin-top: 100px">
          <el-card style="width: 250px">
            <span>欢迎报名</span><br />
            请报考人员认真阅读本说明，按要求填写报名表。<br />
            报考人所填写信息务必真实、准确、规范、清晰。<br />
            请报考人员在提交前对信息的真实性进行核对，信息不实引起的相关责任由考生本人承担。<br />
            报名成功请耐心等待审核，审核结果请查看报名信息。
          </el-card>
        </div>
      </el-col>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Signupinfo",
  data() {
    return {
      kcdm: [],
      param: "", // 表单要提交的参数
      form: {
        username: "",
        password: "",
        ymz: "",
        zycc: "",
        zymc: "",
        kcdm: [],
      },
      steps: "1",
      //定义校验规则
      rules: {
        username: [
          { required: true, message: "请输入准考证号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      options: [
        {
          value: "本科",
          label: "本科",
        },
        {
          value: "专科",
          label: "专科",
        },
      ],
      fileList: [],
      options_zymc: [],
    };
  },
  mounted() {
    //加载课程代码
    this.GetCode();
    this.$forceUpdate(); //解决数据渲染延迟
  },
  methods: {
    Buttonstate() {
      let param = new URLSearchParams();
      param.append("username", this.$store.state.user.username);
      this.axios.post("signupres", param).then((response) => {
        console.log(response.data);
        console.log(response.data["msg"]);
        this.$forceUpdate(); //解决数据渲染延迟
        if (response.data["msg"] == "ok") {
          //  res表示审核的结果（0表示未审核，1表示审核通过，-1表示审核不通过，2表示没开始报名）
          if (response.data["res"] == "2") {
            //未报名
            this.steps = "1";
          } else if (response.data["res"] == "0") {
            //未审核
            this.steps = "2";
          } else if (
            response.data["res"] == "1" ||
            response.data["res"] == "-1"
          ) {
            //审核结果
            this.steps = "3";
          }
        }
      });
    },
    GetCode() {
      console.log("正在获取课程代码");
      this.axios.post("showcode").then((response) => {
        console.log(response.data);
        if (response.data["msg"] == "ok") {
          this.kcdm = response.data["course"];
        }
      });
    },
    Change() {
      this.GetCode();
      this.form.zymc = "";
      if (this.form.zycc == "本科") {
        this.options_zymc = [
          {
            value: "计算机科学技术",
            label: "计算机科学技术",
          },
          {
            value: "网路工程",
            label: "网路工程",
          },
        ];
      } else if (this.form.zycc == "专科") {
        this.options_zymc = [
          {
            value: "计算机信息管理",
            label: "计算机信息管理",
          },
          { value: "计算机应用技术", label: "计算机应用技术" },
        ];
      }
    },
    Submit() {
      this.$confirm("提交信息无误，确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.upload.submit();
          console.log(this.param);
          this.param.append("name", this.form.name);
          this.param.append("sex", this.form.sex);
          this.param.append("sfzh", this.form.sfzh);
          this.param.append("ticket", this.form.ticket);
          this.param.append("tele", this.form.tele);
          this.param.append("email", this.form.email);
          this.param.append("zycc", this.form.zycc);
          this.param.append("zymc", this.form.zymc);
          this.param.append("kcdm", this.form.kcdm);
          //    设置上传数据类型
          let configs = {
            headers: { "Content-Type": "multipart/form-data" },
          };

          this.axios.post("upload", this.param, configs).then((response) => {
            console.log(response.data);
            if (response.data["msg"] == "ok") {
              this.$forceUpdate(); //解决数据渲染延迟
            }
          });
          this.$message({
            type: "success",
            message: "提交成功，请耐心等待审核结果!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    ///返回首页
    goHome() {
      this.$router.push("/index");
    },
    //跳转注册界面
    goRegister() {
      this.$router.push("/register");
    },
    //跳转注册界面
    goAdminLogin() {
      this.$router.push("/adminlogin");
    },
    //跳转忘记密码器页面
    goForget() {
      this.$router.push("/forget");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      this.param = new FormData();
      this.fileList.push(file);
      let images = [...this.fileList];
      console.log("images", images);

      //this.param.append("file1", images);

      images.forEach((img) => {
        this.param.append("file", img); // 把单个图片重命名，存储起来（给后台）
      });
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
/*表单那块——注册*/
.table {
  margin-top: 10px;
  margin-left: 0px;
  width: 600px;
  font-size: 14px;
  line-height: 34px;
}
.sontable {
  margin-top: 10px;
  margin-left: 30px;
}
.el-card {
  width: 270px;
  height: 320px;
  margin-top: 100px;
  margin-left: 150px;
  span {
    font-weight: bolder;
  }
  p {
    margin-top: 20px;
    font-size: 14px;
    color: #424242;
    line-height: 34px;
  }
}
.el-input {
  width: 240px;
}
</style>
